<template>
  <a-form :form="form" style="height: 100%;">
    <a-row>
    <a-col :span="24">
        <div class="table-operator">
          <a-button @click="addRow">{{$ti18('rxList.newBtn', '添加')}}</a-button>
          <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
          <a-button @click="upRow">{{i18n('list.MoveUp','上移')}}</a-button>
          <a-button @click="downRow">{{i18n('list.MoveDown','下移')}}</a-button>

            {{i18n('form.separator','值分隔符')}}: <a-input :placeholder="i18n('form.separator','值分隔符')" style="width: 80px" v-model="separator"></a-input>
        </div>
        <rx-grid ref="table"
                 :dataSource="fields"
                 :columns="columns"
                 :allowRowSelect="true"
                 :multiSelect="true"
                 :showPage="false"
                 style="height:300px;">
          <span slot="code" slot-scope="{text,record,index,blur}">
              <a-input v-model="record.code" @blur="blur(index,'code',text,record)" />
          </span>
          <span slot="name" slot-scope="{text,record,index,blur}">
            <a-input v-model="record.name" @blur="blur(index,'name',text,record)" />
          </span>
            <span slot="colorConfigs" slot-scope="{text,record,index,blur}">
                  <div class="rx-colorConfigs">
                      <div class="rx-colorConfigs-name"><span :style="styleName(record)">{{record.name}}</span></div>
                      <my-icon @click="openConfig(record)" type="iconsetup"></my-icon>
                  </div>
              </span>
        </rx-grid>
    </a-col>
  </a-row>
  </a-form>
</template>

<script>
  import {RxGrid,Util} from "@lowcode/jpaas-common-lib";
  import ColorConfig from "@/views/modules/system/core/SysDicColorConfig.vue";
  export default {
    name: "renderConfig_display_items",
    props:["layerid","destroy"],
    components:{
      RxGrid
    },
    data(){
      return {
        labelCol: { span:6 },
        wrapperCol: { span:18 },
        labelCol1: { span:3 },
        wrapperCol1: { span:19 },
        form: this.$form.createForm(this),
        mdl:{},
        fields:[],
        separator:"",
        columns:[
          {title:this.$ti18('rxList.index', '序号'),width:20,dataIndex: 'index',type:'indexColumn',scopedSlots: {customRender: 'index'}},
          {title:this.i18n('form.labelKey','标签键'),width:50,dataIndex: 'code',allowCellEdit:true,scopedSlots: {customRender: 'code'}},
          {title:this.i18n('form.tagName','标签名'),width:50,dataIndex: 'name',allowCellEdit:true,scopedSlots: {customRender: 'name'}},
          {title: this.i18n("form.StyliZe","风格化"), dataIndex: 'colorConfigs', width: 120, allowCellEdit: false, scopedSlots: {customRender: 'colorConfigs'}},
        ]
      }
    },
    computed:{
      table(){
        return this.$refs.table;
      },
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
      setData(data,fieldDts){
        if(data && data.colorConfigs){
          this.fields=data.colorConfigs;
        }
        this.separator=data.separator || ",";
        this.mdl=data;
        this.form.setFieldsValue(this.mdl);
      },
      //风格化
      styleName(record){
          if(!record.colorConfigs){
              return
          }
          let style = JSON.parse(record.colorConfigs);
          return {
              background:style.bgcolor,
              color:style.fgcolor,
          };
      },
      openConfig(record){
          let config=record.colorConfigs
          if (record.colorConfigs && typeof record.colorConfigs =='string' ){
              config=JSON.parse(record.colorConfigs)
          }
          var conf= {
              curVm:this,
              data:{
                  config:config,
                  name:record.name
              },
              component:ColorConfig,
              widthHeight: ['523px', '492px'],
              title: this.i18n("form.StyliZeConfig","风格化配置")
          };
          var self_=this;
          Util.open(conf,function(action,data){
              if (action!="ok"){
                  return
              }
              if (!data){
                  return;
              }
              record.colorConfigs=JSON.stringify(data);
              record.bgcolor=data.bgcolor;
              record.fgcolor=data.fgcolor;

          })
      },
      validate(callback){
        var self=this;
        this.form.validateFields((err, values) => {
          if(err){
            return;
          }
          self.mdl=values;
          callback();
        });
      },
      getData(){
        this.mdl.colorConfigs=this.table.getData();
        this.mdl.separator=this.separator;
        return this.mdl;
      },
      changeData(e,field){
        this.mdl[field]=e.target.checked;
      },
      addRow(){
        this.table.addRow({});
      },
      removeRow(){
        this.table.removeRows();
      },
      upRow(){
        this.table.moveUp();
      },
      downRow(){
        this.table.moveDown();
      }
    }
  }
</script>

<style scoped>
.rx-colorConfigs{
    display: flex;
    height: 30px;
    align-items: center;
    width: 100%;
    border: 1px solid #dadde0;
    border-radius: 5px;
}
.rx-colorConfigs-name{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
    display: flex;
    align-items: center;
    border-right: 1px solid #dadde0;
    padding-left: 5px;
}
.rx-colorConfigs-name span{
    padding: 0px 8px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
    font-size: 12px;
}
.rx-colorConfigs i{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rx-colorConfigs i:hover{
    color: #2387fa;
}
</style>